{% extends 'base.html' %}

{% load static %}

{% block title %}
    地址管理
{% endblock %}

{% block head %}
    <link href="{% static 'css/admin.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/amazeui.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/personal.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/addstyle.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'js/amazeui.js' %}"></script>
{% endblock %}

{% block body %}
    <div class="Bott">
        <div class="wrapper clearfix" style="margin: 0 auto">
            <div class="zuo fl" style="margin-left: 100px">
                <h3>
                    <a href="/"><img src="{% static 'images/tx.png' %}"></a>
                    <p class="clearfix"><span class="fl">[{{ user.username }}]</span>
                        <span class="fr logout"><a href="{% url 'users:logout' %}">[退出登录]</a></span></p>
                </h3>
                <div>
                    <ul>
                        <li><a href="{% url 'users:user_index' %}">我的订单</a></li>
                    </ul>
                    <ul>
                        <li><a href="{% url 'users:address' %}">地址管理</a></li>
                    </ul>

                </div>
            </div>
            <div class="you fl" style="width: 75%">

                <h2>收货地址</h2>

                <div class="user-address">
                    <!--标题 -->
                    <div class="am-cf am-padding">
                        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> /
                            <small>Address&nbsp;list</small>
                        </div>
                    </div>
                    <hr/>
                    <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
                        {% for addr in addrs %}
                            <li class="user-addresslist {% if addr.is_default %}defaultAddr{% endif %}">
                                <span class="new-option-r"><i class="am-icon-check-circle"></i>设为默认</span>
                                <p class="new-tit new-p-re">
                                    <span class="new-txt">{{ addr.a_name }}</span>
                                    <span class="new-txt-rd2">{{ addr.a_phone }}</span>
                                </p>
                                <div class="new-mu_l2a new-p-re">
                                    <p class="new-mu_l2cw">
                                        <span class="title">地址：</span>
                                        {#<span class="province">湖北</span>省#}
                                        {#<span class="city">武汉</span>市#}
                                        {#<span class="dist">洪山</span>区#}
                                        <span class="street">{{ addr.addr }}</span></p>
                                </div>
                                <div class="new-addr-btn">
                                    <a href="#"><i class="am-icon-edit"></i>编辑</a>
                                    <span class="new-addr-bar">|</span>
                                    <a href="javascript:void(0);" onclick="delClick(this);"><i
                                            class="am-icon-trash"></i>删除</a>
                                </div>
                            </li>
                        {% endfor %}

                    </ul>
                    <div class="clear"></div>
                    <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                    <!--例子-->
                    <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                        <div class="add-dress">

                            <!--标题 -->
                            <div class="am-cf am-padding">
                                <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> /
                                    <small>Add&nbsp;address</small>
                                </div>
                            </div>
                            <hr/>


                        </div>

                    </div>

                </div>


                <div class="clear"></div>
                <div class="add">
                    <div onclick="add()">
                        <a href="javascript:void(0);" id="addxad"><img src="{% static 'images/jia.jpg' %}"></a>
                        <span>添加新地址</span>
                    </div>
                </div>

            </div>

            <div class="mask" style="display: none;"></div>
            <div class="adddz" style="display: none;">
                <form action="#" method="get">
                    <input type="text" placeholder="姓名" name="name" class="on">
                    <input type="text" placeholder="手机号" name="phone">
                    <div class="city">
                        <select name="provinces">
                            {% for province in provinces %}
                                <option value="{{ province.id }}">{{ province.name }}</option>
                            {% endfor %}
                        </select>
                        <select name="citys">

                            {% for city in citys %}
                                <option value="{{ city.id }}">{{ city.name }}</option>
                            {% endfor %}

                        </select>
                        <select name="areas">

                            {% for area in areas %}
                                <option value="{{ area.id }}">{{ area.name }}</option>
                            {% endfor %}


                        </select>
                    </div>
                    <textarea name="" rows="" cols="" class="address_details" placeholder="详细地址"></textarea>
                    <div class="bc">
                        <input type="button" onclick="save_address()" value="保存">
                        <input type="button" class="add-" value="取消">
                    </div>
                </form>
            </div>

        </div>
    </div>
    {% csrf_token %}
{% endblock body %}

{% block body_end %}
    <script>
        $(document).ready(function () {
            $(".new-option-r").click(function () {
                $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
            });

            let $ww = $(window).width();
            if ($ww > 640) {
                $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
            }

        });
        //退出登录功能
        $('.logout').click(function () {

            $.ajax({
                method: 'post',
                url: '{% url 'users:logout' %}?code=200',
                data: 'csrfmiddlewaretoken=' + $('input[name="csrfmiddlewaretoken"]').val(),
                success: function (data) {
                    window.location = '{% url 'users:login' %}'
                }
            })
        });
        //隐藏地址输入框
        $('.mask').click(function () {
            $(this).css('display', 'none');
            $('.adddz').css('display', 'none');
            $('.new-option-r').show();
        });
        //隐藏地址输入框
        $('.add-').click(function () {
            $('.mask').css('display', 'none');
            $('.adddz').css('display', 'none');
            $('.new-option-r').show();
        });

        //显示地址输入框
        function add() {
            $('.mask').css('display', 'block');
            $('.adddz').css('display', 'block');
            $('.new-option-r').hide();
        }

        //三级联动
        $('select[name="provinces"]').change(function () {
            //获得是select选中的option的value
            var provinceId = $(this).val();
            $.ajax({
                type: 'post',
                url: '{% url 'users:area' %}',
                data: 'provinceId=' + provinceId + '&type=1&csrfmiddlewaretoken=' + $('input[name="csrfmiddlewaretoken"]').val(),
                success: function (data) {
                    //console.log(data.citys);
                    let citys_parent = $('select[name="citys"]');
                    citys_parent.empty();
                    if (data.citys == '') {
                        citys_parent.hide(1);
                    }
                    else {
                        citys_parent.show(1);
                        for (let index = 0; index < data.citys.length; index++) {
                            let city = data.citys[index];
                            let r = '<option value="' + city.id + '">' + city.name + '</option>';
                            $(r).appendTo(citys_parent);
                        }
                    }
                    let areas_parent = $('select[name="areas"]');
                    areas_parent.empty();
                    if (data.areas == '') {
                        areas_parent.hide(1);
                    }
                    else {
                        areas_parent.show(1);
                        for (let index = 0; index < data.areas.length; index++) {
                            let area = data.areas[index];
                            let r = '<option value="' + area.id + '">' + area.name + '</option>';
                            $(r).appendTo(areas_parent)
                        }
                    }
                }
            })
        });

        $('select[name="citys"]').change(function () {
            var cityid = $(this).val();
            $.ajax({
                type: 'post',
                url: '{% url 'users:area' %}',
                data: 'cityId=' + cityid + '&type=2&csrfmiddlewaretoken=' + $('input[name="csrfmiddlewaretoken"]').val(),
                success: function (data) {
                    var areas_parent = $('select[name="areas"]');
                    areas_parent.empty();
                    areas_parent.hide();
                    if (data.areas == '') {
                        areas_parent.hide(1);
                    }
                    else {
                        areas_parent.show(1);
                        $.each(data.areas, function (index, area) {
                            let r = '<option value="' + area.id + '">' + area.name + '</option>';
                            $(r).appendTo(areas_parent)
                        })
                    }
                }
            })
        });

        function save_address() {
            var name = $('input[name="name"]').val();
            var phone = $('input[name="phone"]').val();
            var province = $('select[name="provinces"] option:selected').text();
            var city = $('select[name="citys"] option:selected').text();
            var area = $('select[name="areas"] option:selected').text();
            var details_address = $('.address_details').val();
            var address = province + city + area + details_address;
            var csrf_name = $('input[name="csrfmiddlewaretoken"]').val();

            $.ajax({
                async: false,
                method: 'post',
                url: '{% url 'users:address' %}',
                data: 'type=3&address=' + address + '&name=' + name + '&phone=' + phone +
                '&csrfmiddlewaretoken=' + csrf_name,
                success: function (data) {
                    if (data) {
                        window.location = '{% url 'users:address' %}'
                    }
                    else {
                        alert('添加失败！')
                    }
                }
            });
            $('.mask').css('display', 'none');
            $('.adddz').css('display', 'none');
            $('.new-option-r').show();
        }


    </script>
{% endblock body_end %}